<template>
    <div class="banner">
        <div class="container">
            <div class="select-modal">
                <ul class="menu-list fl">
                    <li
                            v-for="(item, index) in menuLis"
                            :key="index+'s'"
                            @mouseenter="toggleShow(item.detail)"
                            @mouseleave="toggleHide()">
                        <div class="fl">
                           <div class="title">{{item.name}}</div>
                           <div class="info">
                               <span
                                       v-for="(infoItem, index) in item.info"
                                       :key="index+'info'"
                                       style="margin-right: 20px"
                               >{{infoItem}}</span>
                           </div>
                        </div>
                        <div class="fr">
                            <i class="el-icon-arrow-right"></i>
                        </div>
                    </li>
                </ul>
                <div class="pop-up fl"
                     v-show="popShow"
                     @mouseenter="toggleShow()"
                     @mouseleave="toggleHide()">
                    <span class="pop-item btn" v-for="(item,index) in currentMenu" :key="index+'pop'">{{item}}</span>
                </div>
            </div>
            <div class="login-modal">
                <div class="login-type">
                    <div class="btn">密码登录</div>
                    <div class="btn">验证码登录</div>
                </div>
                <div class="form">
                    <div style="position: relative">
                        <input type="text" class="form-input" placeholder="请输入用户名/邮箱">
                        <i class="el-icon-user-solid" style="position:absolute; left: 12px; top: 40px;"></i>
                    </div>

                    <div style="position: relative">
                        <input type="password" class="form-input" placeholder="请输入密码">
                        <i class="el-icon-s-cooperation" style="position:absolute; left: 12px; top: 40px;"></i>
                    </div>
                    <div class="remember">
                        <span class="check">
                             <el-checkbox>记住密码</el-checkbox>
                        </span>
                        <a class="btn link" @click="goPage('ResetPassword')">忘记密码</a>
                    </div>
                    <button class="login-btn btn" @click="goPage('Login')">登录</button>
                    <div class="info">
                        没有账号
                        <span class="link btn" @click="goPage('Sign')">立即注册</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "Banner",
        data() {
            return {
                currentMenu: [],
                menuLis: [
                    {
                        name: '幼儿园',
                        info: ['幼儿英语','幼儿美术','幼儿书法'],
                        detail: ['幼儿英语',' 幼儿美术',' 幼儿书法',' 幼儿艺术表演',' 幼儿舞蹈','' +
                        '幼儿音乐',' 幼儿声乐',' 幼儿蒙氏教育',' 幼儿体育',' 幼儿心理','' +
                        '幼儿教师/学前教育',' 幼儿保健医生',' 幼儿潜能开发',' 幼儿生活老师','' +
                        '幼儿园长/副园长',' 幼儿元主任/副主任',' 幼儿助教/助理',' 幼儿托管','' +
                        '幼儿兼职/实习',' 幼儿其他',' 幼儿钢琴']
                    },{
                        name: '小学',
                        info: ['小学语文','小学数学','小学英语'],
                        detail: ['幼儿英语',' 幼儿美术',' 幼儿书法',' 幼儿艺术表演',' 幼儿舞蹈','' +
                        '幼儿音乐',' 幼儿声乐',' 幼儿蒙氏教育',' 幼儿体育',' 幼儿心理','' +
                        '幼儿教师/学前教育',' 幼儿保健医生',' 幼儿潜能开发',' 幼儿生活老师','' +
                        '幼儿园长/副园长']
                    },{
                        name: '初中',
                        info: ['初中语文','初中数学','初中英语'],
                        detail: [' 幼儿蒙氏教育',' 幼儿体育',' 幼儿心理','' +
                        '幼儿教师/学前教育',' 幼儿保健医生',' 幼儿潜能开发',' 幼儿生活老师','' +
                        '幼儿园长/副园长',' 幼儿元主任/副主任',' 幼儿助教/助理',' 幼儿托管','' +
                        '幼儿兼职/实习',' 幼儿其他',' 幼儿钢琴']
                    },{
                        name: '高中',
                        info: ['高中语文','高中数学','高中英语'],
                        detail: ['幼儿英语',' 幼儿美术',' 幼儿书法',' 幼儿艺术表演',' 幼儿舞蹈','' +
                        '幼儿音乐',' 幼儿声乐',' 幼儿蒙氏教育',' 幼儿体育',' 幼儿心理','' +
                        '幼儿教师/学前教育',' 幼儿生活老师','' +
                        '幼儿园长/副园长',' 幼儿元主任/副主任',' 幼儿助教/助理',' 幼儿托管','' +
                        '幼儿兼职/实习',' 幼儿其他',' 幼儿钢琴']
                    },{
                        name: '职教学院',
                        info: ['校长/副校长','院长/副院长'],
                        detail: ['幼儿英语',' 幼儿美术',' 幼儿书法',' 幼儿艺术表演',' 幼儿舞蹈','' +
                        '幼儿音乐',' 幼儿声乐',' 幼儿蒙氏教育',' 幼儿体育',' 幼儿心理','' +
                        '幼儿园长/副园长',' 幼儿元主任/副主任',' 幼儿助教/助理',' 幼儿托管','' +
                        '幼儿兼职/实习',' 幼儿其他',' 幼儿钢琴']
                    },{
                        name: '职教学院',
                        info: ['IT培训','资政培训','心理咨询'],
                        detail: ['幼儿英语',' 幼儿美术',' 幼儿书法',' 幼儿艺术表演',' 幼儿舞蹈','' +
                        '幼儿音乐',' 幼儿声乐',' 幼儿蒙氏教育',' 幼儿体育',' 幼儿心理','' +
                        '幼儿教师/学前教育',' 幼儿保健医生',' 幼儿潜能开发',' 幼儿生活老师','' +
                        '幼儿园长/副园长',' 幼儿元主任/副主任',' 幼儿助教/助理',' 幼儿托管','' +
                        '幼儿兼职/实习',' 幼儿其他',' 幼儿钢琴']
                    }
                ],
                popShow: false
            }
        },
        methods: {
            toggleShow(menu) {
                this.popShow = true;
                if(menu) {
                    this.currentMenu = menu
                }
            },
            toggleHide() {
                this.popShow = false
            },
            goPage(pathName) {
                this.$router.push({name: pathName})
            }
        }
    }
</script>

<style scoped lang="less">
    .banner {
        width: 100%;
        /*background: #225EBA;*/
        background: url("../../../assets/images/banner.png") no-repeat 50% 50%/cover;
        .container {
            height: 410px;
            position: relative;
            .select-modal {
                width: 310px;
                height: 100%;
                cursor: pointer;
                position: absolute;
                left: 0;
                top: 0;
                z-index: 2;
                &:hover {
                    width: 910px;
                    box-shadow:0px 4px 5px rgba(22,56,112,0.3);
                }
                .menu-list {
                    background: #fff;
                    li {
                        min-width: 310px;
                        height: 68px;
                        line-height: 68px;
                        text-align: left;
                        padding: 2px 24px;
                        box-sizing: border-box;
                        &:hover {
                            background: #FCFCFC;
                            color: @main-color;
                            .fl .info{
                                color: @main-color;
                            }
                        }
                        .fl {
                            height: 68px;
                            .title {
                                height: 30px;
                                line-height: 30px;
                            }
                            .info {
                                font-size: 12px;
                                color: #808080;
                                height: 20px;
                                line-height: 20px;
                            }
                        }
                        .fr {
                            line-height: 50px;
                        }
                    }
                }
                .pop-up {
                    height: 100%;
                    width: 600px;
                    background: #FCFCFC;
                    padding: 35px 31px;
                    box-sizing: border-box;
                    .pop-item {
                        display: inline-block;
                        padding-right: 40px;
                        margin-bottom: 25px;
                        font-size:14px;
                        font-family:MicrosoftYaHei;
                        font-weight:400;
                        color:rgba(102,102,102,1);
                        &:hover {
                            .link;
                        }
                    }
                }
            }
            .login-modal {
                width: 322px;
                height: 341px;
                padding: 20px 30px;
                box-sizing: border-box;
                background: #fff;
                position: absolute;
                top: 30px;
                right: 0;
                z-index: 0;
                .login-type {
                    display: flex;
                    justify-content: space-between;
                    .btn {
                        width: 75px;
                        height: 33px;
                        line-height: 33px;
                        font-size: 14px;
                        color: #484848;
                        margin: 0 20px;
                        position: relative;
                    }
                    .btn:nth-of-type(1) {
                        color: #CF1311;
                    }
                    .btn:nth-of-type(1):after {
                            content: '';
                        display:inline-block;
                        width:100%;
                        height:2px;
                        border-radius: 1px;
                        background: #CF1311;
                        position: absolute;
                        bottom: 0;
                        left: 0;
                    }
                }
                .form-input {
                    margin: 28px 0 0 0;
                    padding: 0;
                    width: 100%;
                    height: 42px;
                    border: 1px solid #ccc;
                    -webkit-box-sizing: border-box;
                    box-sizing: border-box;
                    outline: none;
                    padding-left: 42px;
                }
                .remember {
                    font-size: 12px;
                    padding: 20px 0 23px 0;
                    height: 12px;
                    .check {
                        float: left;
                        input {
                            box-shadow: none;
                        }
                    }
                    a {
                        float: right;
                    }
                }
                .login-btn {
                    width: 100%;
                    height: 42px;
                    line-height: 42px;
                    color: #fff;
                    background: #E61F1F;
                    text-align: center;
                    border: none
                }
                .info {
                    font-size: 10px;
                    margin-top: 10px;
                }
                i {
                    color: #ccc
                }
            }
        }
    }
</style>